<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!--  实现页面的基本布局 -->
      <el-card class="tree-card">
        <!-- 头部组件区域
          layout布局 el-row 用了一个行列布局将页面分成24列   el-col 以：span='24'来设置左右距离 -->
        <tree-tools :is-root="true" :tree-data="company"></tree-tools>

        <!--  下面就是树形控件内容了
        data : 组件内的数据
        props : 规则属性 默认为label  chidren:子组件默认属性名
         -->
        <el-tree :data="data" :props="{ label: 'name', children: 'children' }">
          <!-- 传入内容 插槽内容 会循环多次 有多少节点 就循环多少次 -->
          <!-- 作用域插槽 slot-scope="obj" 接收传递给插槽的数据   data 每个节点的数据对象-->

          <tree-tools
            slot-scope="{ data }"
            :tree-data="data"
            @updateList="initData"
          />
        </el-tree>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getDepartmentsListApi } from '@/api/departments'
import TreeTools from './components/tree-tools.vue'

import { tranListToTreeData } from '@/utils' // 将列表型的数据转化成树形数据
export default {
  name: 'Departments',
  components: { TreeTools },
  data() {
    return {
      // ! 1、定义变量
      company: { name: '江苏传智播客教育科技股份有限公司', manager: '负责人' },
      data: []
    }
  },
  created() {
    // ! 3、生命周期调用
    this.initData()
  },
  methods: {
    // ! 2、获取数据
    async initData() {
      const res = await getDepartmentsListApi()
      console.log(res)
      this.company.name = res.companyName // company :{name}
      this.data = tranListToTreeData(res.depts, '') // data: [] // 将列表型的数据转化成树形数据 tranListToTreeData
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
